<template>
  <!-- 楼层列表 -->
  <div class="floor-list">
    <div class="e-list clearfix" v-if="floorList.totalCount">
      <w-table :columns="columns">
        <tr v-for="(val, index) in floorList.recordList" :key="index">
          <td>
            <w-checkbox :label='val.id' v-model="val.isChecked" @on-change='changeChecked'></w-checkbox>
          </td>
          <td>{{val.cfSequence}}</td>
          <td>{{val.cfName}}</td>
          <td>{{val.terminal}}</td>
          <td @click="changeShowStatus(val.id, val.disPlay, val.cfSequence)">
            <img src='../../assets/eye.png' v-if='val.disPlay != "1"'>
            <img src='../../assets/eye_r.png' v-if='val.disPlay == "1"'>
          </td>
          <td>
            <em class="cur" @click='$router.push(`/floorMange/cAdd?three=${$route.query.three}&id=${val.id}&terminal=${val.terminal}`)'>编辑 |</em>
            <em class="cur" @click="delPanel = true; delParams.idList = [val.id]">删除</em>
          </td>
        </tr>
      </w-table>
      <div class="all">
        <span>
          <w-checkbox v-model="allChecked" :label='`all`' @on-change='changeChecked("all")'><span>本页全选</span></w-checkbox>
        </span>
        <em class="cur" @click="delChecked">删除</em>
      </div>
      <!-- 分页 -->
      <div class="fr" style="margin-top: 30px">
        <w-paging :current="floorList.currentPage" :total="floorList.pageCount" @on-page='changePage'></w-paging>
      </div>
    </div>
    
    <div class="e-list" v-else>
      <w-table :columns="columns">
        <tr>
          <td colspan='6'>暂无数据</td>
        </tr>
      </w-table>
    </div>

    <!-- 删除楼层 -->
    <w-panel-fixed-wrap v-model="delPanel" :panel-title="true" title="删除楼层" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除该楼层
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiFloorMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      columns: [
        {title: '', width: '5%'},
        {title: '排序'},
        {title: '楼层名称'},
        {title: '展示终端'},
        {title: '显示'},
        {title: '操作'}
      ],
      delPanel: false,
      allChecked: false,
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: 1,
        showCount: 10
      },
      floorList: [],
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        idList: []
      },
      changeParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: '',
        disPlay: '',
        cfSequence: '',
        nowSequence: '',
        oldSequence: ''
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this._getFloorList()
  },
  methods: {
    // 获取 列表
    _getFloorList() {
      this.queryParams.accessToken = this.token
      apiFloorMange.queryCFloorList(this.queryParams).then(data => {
        if (data.code != 200) return
        this.floorList = data.data
      })
    },
    changeShowStatus(id, disPlay, cfSequence) {
      this.changeParams.accessToken = this.token
      this.changeParams.id = id
      this.changeParams.disPlay = disPlay == '1' ? '0' : '1'
      this.changeParams.cfSequence = this.changeParams.oldSequence = this.changeParams.nowSequence = cfSequence
      apiFloorMange.addCFloor(this.changeParams).then(data => {
        if (data.code != 200) return
        this.$toast('该楼层显示状态修改成功', () => {
          this._getFloorList()
        })
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getFloorList()
    },
    // 复选框 点击
    changeChecked(type) {
      this.delParams.idList = []
      if (type == 'all') {
        this.floorList.recordList.forEach(val => {
          this.$set(val, 'isChecked', this.allChecked)
        })
      } else {
        let count = 0
        this.floorList.recordList.forEach(val => {
          if (val.isChecked) {
            count++
          }
        })
        if (count == this.floorList.recordList.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      }
      // 循环出 选中的 id 列表
      this.floorList.recordList.forEach(val => {
        if (val.isChecked) {
          this.delParams.idList.push(val.id)
        }
      })
    },
    // 删除选中
    delChecked() {
      if (!this.delParams.idList.length) {
        this.$toast('请先选择需要删除的楼层')
        return
      }
      this.delPanel = true
    },
    delOption() {
      this.delParams.accessToken = this.token
      apiFloorMange.delCFloor(this.delParams).then(data => {
        if (data.code != 200) return
        this.$toast('删除成功', () => {
          this.delPanel = false
          this.changePage(1)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.floor-list {
  margin-top: 20px;
  width: 100%;
  table {
    tr {
      font-size: 14px;
      & td:nth-of-type(1) {
        border-right: 0;
      }
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
  em {
    color: $color-text-bule;
  } 
  .all {
    margin-top: 10px;
    & > span {
      margin-left: 18px;
      margin-right: 20px;
    }
  }
}
</style>